<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 500px;
            height: 100px;
            margin: 20px auto;

        }
        form input:nth-of-type(1),:nth-of-type(2),:nth-of-type(3){
            width: 30px;
        }
        #box{
            width: 500px;
            margin: 0 auto;
        }
        #start,#stop,#continue1{
            width: 45px;
            height: 30px;
        }
        #start:hover,#stop:hover,#continue1:hover{
            border: #25d2d2 1px solid;
            background: #ffa500;
        }
    </style>
</head>
<body>
<div class="box">
    <h1>JavaScript倒计时</h1>
    <form action="倒计时.html" method="post">
        <input  type="text" value="" name="time" >时
        <input type="text" value="" name="time" >分
        <input type="text" value="" name="time" >秒
        <input id="start" type="button" value="开始">
        <input id="stop" type="button" value="暂停">
        <input id="continue1" type="button" value="继续">
    </form>
</div>
<div id="box">
<h1>00:00:00</h1>
</div>
<script>
    var box = document.getElementById("box");
    var textK = document.getElementsByName("time");
    var start =document.getElementById("start");
    var stop =document.getElementById("stop");
    var continue1 =document.getElementById("continue1");
    var second=0;
    var  timer;
    //开始
    start.onclick = function (){
        clearInterval(timer);
        var shi = (textK[0].value)*60*60;
        var  fen = (textK[1].value)*60;
        var miao = textK[2].value*10;
         second = shi+fen+miao/10;
         function timeStart(){
                 timer =setInterval(function show(){
                 if(second>=0){
                     var hour = Math.floor(second/60/60);//获取时向下取整
                     var minute = Math.floor(second/60%60);//获取分
                     var second1=Math.floor(second%60);//获取秒
                     hour = hour<10?'0'+hour:hour;
                     minute = minute<10?'0'+minute:minute;
                     second1 = second1<10?'0'+second1:second1;
                     box.innerHTML = "<h1>"+hour+":"+minute+":"+second1+"</h1>";
                     --second;//总时间减减
                 }else {

                     clearInterval(timer);
                     alert("倒计时结束");
                 }

             },1000);
         }

    //暂停
    stop.onclick = function (){
            clearInterval(timer);
        };
         //继续
        continue1.onclick = function (){
            clearInterval(timer);
            timeStart();
        };
        timeStart();
    };

</script>
</body>
</html>